<template>
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>个人资料</span>
    <el-dropdown  style="float: right; padding: 3px 0">
      <span class="el-dropdown-link"> 编辑<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click="changeUserImage">更换头像</el-dropdown-item>
        <el-dropdown-item @click="updateUser">编辑资料</el-dropdown-item>
        <el-dropdown-item @click="updateUserPwd">修改密码</el-dropdown-item>

      </el-dropdown-menu>
    </el-dropdown>
  </div>
  
  <div class="information-div-form">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">

        <el-row>
          <el-form-item label="姓名">
            <el-input v-model="formInline.name" placeholder="姓名"></el-input>
          </el-form-item>
      
          <el-form-item label="邮箱">
            <el-input v-model="formInline.email" placeholder="邮箱"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="手机">
            <el-input v-model="formInline.phone" placeholder="手机"></el-input>
          </el-form-item>

          <el-form-item label="公司">
            <el-input v-model="formInline.corp" placeholder="公司"></el-input>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="部门">
            <el-input v-model="formInline.office" placeholder="部门"></el-input>
          </el-form-item>

          <el-form-item label="备注">
            <el-input  placeholder="备注"></el-input>
          </el-form-item>
        </el-row>

    </el-form>

  </div>

</el-card>

</template>

<script>

  import { mergeQuery,appendQueryParams,getDictLableName } from "@/utils/dataUtils";
  import { editUserPassword, getUser,putUser }  from  "@/views/modules/basicArchives/common/api/persionInfomation/persionInfomationIndex";
  export default {
    name:"persionInformation",
    mounted () {
      console.log('挂载后');
    },
    data() {
      return {
        formInline:{ 'name':'admin', 'email':'',  'phone':'phone',  'corp':'corp' , 'office':'office'},
        queryForm:{
         
        }
      }
    },
    methods: {
      changeUserImage (){

      },
      updateUser (){

      },
      updateUserPwd(){

      }
    },
   
    
  }
</script>

<style>
  .text {
    color: #606266;
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 70%;
  }

  .information-div-form{
    text-align: center;
  }

</style>